import React, { useState } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from 'umi';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 8,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = (props) => {

  const {dispatch} = props
  var key = 3
  const onFinish = (values) => {
    key++
      values["key"] = String(key)
    dispatch({
      type: 'employee/addEmployee',
      payload:{
        user:values
      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="FirstName"
        name="firstName"
        rules={[
          {
            required: true,
            message: 'Please input your FirstName!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="LastName"
        name="lastName"
        rules={[
          {
            required: true,
            message: 'Please input your LastName!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Age"
        name="age"
        rules={[
          {
           
            message: 'Please input your Age!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Address"
        name="address"
        rules={[
          {
          
            message: 'Please input your Address!',
          },
        ]}
      >
        <Input />
      </Form.Item>

    

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};





 function Employee({
  match: {
    params: { id },
  },
  employee, 
  dispatch 
}) {
  return (
    <div>
      <Demo dispatch={dispatch} ></Demo>
      {/* <h1>Employee {id} 's Page</h1> */}
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(Employee);